<template>
  <div v-if="visible" class="contest-detail-modal" @click="closeModal">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h2>{{ contest?.title || '竞赛详情' }}</h2>
        <button class="close-btn" @click="closeModal">&times;</button>
      </div>
      
      <div class="modal-body">
        <!-- 竞赛基本信息 -->
        <div class="contest-info">
          <div class="info-item">
            <span class="label">竞赛状态：</span>
            <span :class="`status ${contest?.status}`">{{ getStatusText(contest?.status) }}</span>
          </div>
          <div class="info-item">
            <span class="label">竞赛分类：</span>
            <span>{{ getCategoryText(contest?.category) }}</span>
          </div>
          <div class="info-item">
            <span class="label">主办方：</span>
            <span>{{ contest?.organizer || '待公布' }}</span>
          </div>
          <div class="info-item">
            <span class="label">开始时间：</span>
            <span>{{ formatDate(contest?.startDate) }}</span>
          </div>
          <div class="info-item">
            <span class="label">结束时间：</span>
            <span>{{ formatDate(contest?.endDate) }}</span>
          </div>
          <div class="info-item">
            <span class="label">奖金设置：</span>
            <span class="prize">{{ contest?.prize || '待公布' }}</span>
          </div>
          <div class="info-item">
            <span class="label">参与人数：</span>
            <span>{{ contest?.participantCount || contest?.participants || 0 }}人</span>
          </div>
        </div>
        
        <!-- 竞赛描述 -->
        <div class="contest-description">
          <h3>竞赛描述</h3>
          <p class="description-text">{{ contest?.description || '暂无描述' }}</p>
        </div>
        
        <!-- 竞赛规则 -->
        <div v-if="contest?.rules" class="contest-rules">
          <h3>竞赛规则</h3>
          <div class="rules-content">
            <p v-for="(rule, index) in formatRules(contest.rules)" :key="index" class="rule-item">
              {{ rule }}
            </p>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <!-- 未参赛时显示参与按钮 -->
          <button 
            v-if="!contest?.isJoined" 
            class="btn btn-primary" 
            @click="joinContest"
            :disabled="!userStore.isAuthenticated || contest?.status === 'ended'"
            :title="!userStore.isAuthenticated ? '请先登录' : (contest?.status === 'ended' ? '竞赛已结束' : '')"
          >
            {{ !userStore.isAuthenticated ? '请先登录' : '参与竞赛' }}
          </button>
          
          <!-- 已参赛时显示退赛按钮和提交作品按钮 -->
          <template v-if="contest?.isJoined">
            <button 
              class="btn btn-secondary" 
              @click="leaveContest"
              :disabled="!userStore.isAuthenticated"
            >
              退出竞赛
            </button>
            <button 
              class="btn btn-success" 
              @click="showSubmitModal = true"
              :disabled="!userStore.isAuthenticated || contest?.hasSubmittedWork || contest?.status === 'ended'"
              :title="getSubmitButtonTitle()"
            >
              {{ getSubmitButtonText() }}
            </button>
          </template>
          
          <!-- 已提交作品的提示 -->
          <div v-if="contest?.hasSubmittedWork" class="submitted-work-info">
            <span class="submitted-badge">✓ 已提交作品</span>
            <span v-if="contest?.submittedWorkTitle" class="work-title">{{ contest.submittedWorkTitle }}</span>
          </div>
        </div>
        
        <!-- 作品列表 -->
        <div class="works-section">
          <h3>参赛作品</h3>
          <div v-if="loading" class="loading">加载中...</div>
          <div v-else-if="works.length === 0" class="no-works">暂无作品</div>
          <div v-else class="works-grid">
            <div v-for="work in works" :key="work.id" class="work-card">
              <div class="work-thumbnail">
                <img :src="getWorkThumbnail(work)" :alt="work.title" />
              </div>
              <div class="work-info">
                <h4>{{ work.title }}</h4>
                <p class="work-author">作者：{{ work.author }}</p>
                <div class="work-actions">
                  <button 
                    class="action-btn like-btn" 
                    :class="{ active: work.isLiked }"
                    @click="toggleLike(work)"
                  >
                    <span class="icon">👍</span>
                    <span>{{ work.likes || 0 }}</span>
                  </button>
                  <button 
                    class="action-btn favorite-btn" 
                    :class="{ active: work.isFavorited }"
                    @click="toggleFavorite(work)"
                  >
                    <span class="icon">⭐</span>
                    <span>{{ work.favorites || 0 }}</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 提交作品弹窗 -->
    <div v-if="showSubmitModal" class="submit-modal" @click="showSubmitModal = false">
      <div class="submit-content" @click.stop>
        <div class="submit-header">
          <h3>提交参赛作品</h3>
          <button @click="showSubmitModal = false" class="close-btn">×</button>
        </div>
        <form @submit.prevent="submitWork" class="submit-form">
          <div class="form-row">
            <div class="form-group">
              <label class="required">作品名称</label>
              <input 
                v-model="submitForm.title" 
                type="text" 
                placeholder="请输入作品名称" 
                required 
                maxlength="50"
              />
              <span class="char-count">{{ submitForm.title.length }}/50</span>
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label class="required">作品分类</label>
              <select v-model="submitForm.category" required>
                <option value="">请选择作品分类</option>
                <option 
                  v-for="category in categories" 
                  :key="category.value" 
                  :value="category.value"
                >
                  {{ category.label }}
                </option>
              </select>
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label>作品样图 <span class="optional">(可选)</span></label>
              <div class="image-upload">
                <div v-if="submitForm.imagePreview" class="image-preview">
                  <img :src="submitForm.imagePreview" alt="作品样图" />
                  <button type="button" @click="removeImage" class="remove-image">×</button>
                </div>
                <div v-else class="upload-placeholder" @click="$refs.imageInput.click()">
                  <div class="upload-icon">📷</div>
                  <p>点击上传作品样图</p>
                  <small>支持 JPG、PNG 格式，建议尺寸 800x600</small>
                </div>
                <input 
                  ref="imageInput"
                  type="file" 
                  @change="handleImageSelect" 
                  accept="image/*"
                  style="display: none;"
                />
              </div>
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label>作品描述 <span class="optional">(可选)</span></label>
              <textarea 
                v-model="submitForm.description" 
                rows="4" 
                placeholder="请描述您的作品创意、设计理念或技术特点..."
                maxlength="500"
              ></textarea>
              <span class="char-count">{{ submitForm.description.length }}/500</span>
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label class="required">作品文件</label>
              <div class="file-upload">
                <div v-if="submitForm.file" class="file-info">
                  <div class="file-icon">📄</div>
                  <div class="file-details">
                    <span class="file-name">{{ submitForm.file.name }}</span>
                    <span class="file-size">{{ formatFileSize(submitForm.file.size) }}</span>
                  </div>
                  <button type="button" @click="removeFile" class="remove-file">×</button>
                </div>
                <div v-else class="upload-placeholder" @click="$refs.fileInput.click()">
                  <div class="upload-icon">📁</div>
                  <p>点击选择作品文件</p>
                  <small>支持图片、视频、文档等格式，最大 50MB</small>
                </div>
                <input 
                  ref="fileInput"
                  type="file" 
                  @change="handleFileSelect" 
                  accept="image/*,video/*,.pdf,.doc,.docx,.ppt,.pptx,.zip,.rar"
                  style="display: none;"
                  required
                />
              </div>
            </div>
          </div>
          
          <div class="form-actions">
            <button type="button" @click="showSubmitModal = false" class="cancel-btn">
              取消
            </button>
            <button type="submit" :disabled="submitting || !isFormValid" class="submit-btn">
              <span v-if="submitting" class="loading-icon">⏳</span>
              {{ submitting ? '提交中...' : '提交作品' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { useContestStore } from '../stores/contest';
import { useUserStore } from '../stores/user';
import { useMessage } from '../composables/useMessage';
import { categoryApi } from '../api/services';
import { API_BASE_URL } from '../api/config';

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  contestId: {
    type: [String, Number],
    default: null
  }
});

// Emits
const emit = defineEmits(['close', 'update:visible']);

// Store
const contestStore = useContestStore();
const userStore = useUserStore();

// 消息弹窗
const { success, error, warning, confirm } = useMessage();

// 响应式数据
const contest = computed(() => contestStore.currentContest);
const loading = ref(false);
const works = ref([]);
const showSubmitModal = ref(false);
const submitting = ref(false);
const categories = ref([]);
const submitForm = ref({
  title: '',
  description: '',
  category: '',
  file: null,
  image: null,
  imagePreview: ''
});

// 表单验证
const isFormValid = computed(() => {
  return submitForm.value.title.trim() && 
         submitForm.value.category && 
         submitForm.value.file;
});

/**
 * 关闭弹窗
 */
const closeModal = () => {
  emit('close');
  emit('update:visible', false);
};

/**
 * 获取状态文本
 * @param {string} status - 状态值
 * @returns {string} 状态文本
 */
const getStatusText = (status) => {
  const statusMap = {
    'active': '进行中',
    'ongoing': '进行中',
    'upcoming': '即将开始',
    'ended': '已结束'
  };
  return statusMap[status] || '未知';
};

/**
 * 获取分类文本
 * @param {string} category - 分类值
 * @returns {string} 分类文本
 */
const getCategoryText = (category) => {
  const categoryMap = {
    'design': '设计类',
    'video': '视频类',
    'programming': '编程类',
    'writing': '写作类',
    'text': '文本类',
    'photography': '摄影类',
    'music': '音乐类',
    'innovation': '创新类',
    'entrepreneurship': '创业类',
    'technology': '科技类',
    'other': '其他'
  };
  return categoryMap[category] || category || '未分类';
};

/**
 * 格式化竞赛规则
 * @param {string} rules - 规则文本
 * @returns {Array<string>} 格式化后的规则数组
 */
const formatRules = (rules) => {
  if (!rules) return [];
  // 按换行符分割规则，过滤空行
  return rules.split('\n').filter(rule => rule.trim().length > 0);
};

/**
 * 格式化日期
 * @param {string} dateStr - 日期字符串
 * @returns {string} 格式化后的日期
 */
const formatDate = (dateStr) => {
  if (!dateStr) return '待定';
  return new Date(dateStr).toLocaleString('zh-CN');
};

/**
 * 获取提交作品按钮的文本
 * @returns {string} 按钮文本
 */
const getSubmitButtonText = () => {
  if (!userStore.isAuthenticated) return '请先登录';
  if (contest.value?.hasSubmittedWork) return '已提交作品';
  if (contest.value?.status === 'ended') return '竞赛已结束';
  return '提交作品';
};

/**
 * 获取提交作品按钮的标题提示
 * @returns {string} 按钮标题
 */
const getSubmitButtonTitle = () => {
  if (!userStore.isAuthenticated) return '请先登录后再提交作品';
  if (contest.value?.hasSubmittedWork) return '您已经提交了作品，无法重复提交';
  if (contest.value?.status === 'ended') return '竞赛已结束，无法提交作品';
  return '点击提交您的参赛作品';
};

/**
 * 获取作品缩略图
 * @param {Object} work - 作品对象
 * @returns {string} 缩略图URL
 */
const getWorkThumbnail = (work) => {
  if (work.thumbnail) {
    return work.thumbnail.startsWith('http') ? work.thumbnail : `${API_BASE_URL}${work.thumbnail}`;
  }
  return '/img/thumb.jpg';
};

/**
 * 参与竞赛
 */
const joinContest = async () => {
  if (!userStore.isAuthenticated) {
    warning('请先登录后再参与竞赛', '需要登录');
    return;
  }
  
  if (contest.value?.status === 'ended') {
    warning('竞赛已结束，无法参与', '竞赛已结束');
    return;
  }
  
  try {
    const result = await contestStore.joinContest(props.contestId);
    console.log(result,333333333333);
    
    // 根据返回的状态显示不同的消息
    if (result.status === 'already_joined') {
      success('您已经参与了该竞赛，现在可以提交作品了！', '已参与竞赛');
    } else {
      success('恭喜您成功参与竞赛！现在可以提交作品了。', '参与成功');
    }
    
    // 确保状态正确更新：无论是新参与还是已参与，都设置为已参与状态
    if (contestStore.currentContest) {
      contestStore.currentContest.isJoined = true;
    }
    
    // 重新加载竞赛详情以更新参与状态
    await loadContestDetail();
  } catch (error) {
    error('参与竞赛失败，请检查网络连接后重试', '参与失败');
  }
};

/**
 * 退出竞赛
 */
const leaveContest = async () => {
  try {
    await confirm('退出后将无法再次参与该竞赛，确定要退出吗？', '确认退出竞赛');
    
    try {
      await contestStore.leaveContest(props.contestId);
      success('您已成功退出竞赛', '退出成功');
      // 重新加载竞赛详情以更新参与状态
      await loadContestDetail();
    } catch (error) {
      error('退出竞赛失败，请检查网络连接后重试', '退出失败');
    }
  } catch (error) {
    // 用户取消退出，不需要处理
  }
};

/**
 * 处理图片选择
 * @param {Event} event - 图片选择事件
 */
const handleImageSelect = (event) => {
  const file = event.target.files[0];
  if (file) {
    // 验证文件类型
    if (!file.type.startsWith('image/')) {
      warning('请选择图片文件', '文件类型错误');
      return;
    }
    
    // 验证文件大小 (5MB)
    if (file.size > 5 * 1024 * 1024) {
      warning('图片文件大小不能超过 5MB', '文件过大');
      return;
    }
    
    submitForm.value.image = file;
    
    // 创建预览
    const reader = new FileReader();
    reader.onload = (e) => {
      submitForm.value.imagePreview = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

/**
 * 移除图片
 */
const removeImage = () => {
  submitForm.value.image = null;
  submitForm.value.imagePreview = '';
};

/**
 * 处理文件选择
 * @param {Event} event - 文件选择事件
 */
const handleFileSelect = (event) => {
  const file = event.target.files[0];
  if (file) {
    // 验证文件大小 (50MB)
    if (file.size > 50 * 1024 * 1024) {
      warning('文件大小不能超过 50MB', '文件过大');
      return;
    }
    
    submitForm.value.file = file;
  }
};

/**
 * 移除文件
 */
const removeFile = () => {
  submitForm.value.file = null;
};

/**
 * 格式化文件大小
 * @param {number} bytes - 字节数
 * @returns {string} 格式化后的文件大小
 */
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

/**
 * 提交作品
 */
const submitWork = async () => {
  if (!userStore.isAuthenticated) {
    warning('请先登录后再提交作品', '需要登录');
    return;
  }
  
  if (!isFormValid.value) {
    warning('请完善必填信息', '表单验证失败');
    return;
  }
  
  submitting.value = true;
  try {
    // 构建提交数据
    const workData = {
      title: submitForm.value.title.trim(),
      description: submitForm.value.description.trim(),
      category: submitForm.value.category
    };
    
    await contestStore.submitWork(props.contestId, workData, submitForm.value.file, submitForm.value.image);
    success('您的作品已成功提交！评审结果将在竞赛结束后公布。', '提交成功');
    showSubmitModal.value = false;
    
    // 重新加载作品列表和竞赛详情
    await loadWorks();
    await loadContestDetail();
    
    // 重置表单
    resetForm();
  } catch (error) {
    error('作品提交失败，请检查文件格式和网络连接后重试', '提交失败');
  } finally {
    submitting.value = false;
  }
};

/**
 * 重置表单
 */
const resetForm = () => {
  submitForm.value = {
    title: '',
    description: '',
    category: '',
    file: null,
    image: null,
    imagePreview: ''
  };
};

/**
 * 加载分类数据
 */
const loadCategories = async () => {
  try {
    categories.value = await categoryApi.getCategories();
  } catch (error) {
    console.error('加载分类失败:', error);
  }
};

/**
 * 切换点赞状态
 * @param {Object} work - 作品对象
 */
const toggleLike = async (work) => {
  if (!userStore.isAuthenticated) {
    warning('请先登录后再进行点赞操作', '需要登录');
    return;
  }
  
  try {
    await contestStore.voteWork(work.id);
    work.isLiked = !work.isLiked;
    work.likes = work.isLiked ? (work.likes || 0) + 1 : Math.max((work.likes || 1) - 1, 0);
  } catch (error) {
    error('点赞操作失败，请检查网络连接后重试', '操作失败');
  }
};

/**
 * 切换收藏状态
 * @param {Object} work - 作品对象
 */
const toggleFavorite = async (work) => {
  if (!userStore.isAuthenticated) {
    warning('请先登录后再进行收藏操作', '需要登录');
    return;
  }
  
  try {
    // 这里需要调用收藏API，暂时模拟
    work.isFavorited = !work.isFavorited;
    work.favorites = work.isFavorited ? (work.favorites || 0) + 1 : Math.max((work.favorites || 1) - 1, 0);
    success(work.isFavorited ? '作品已添加到收藏夹' : '已取消收藏该作品', work.isFavorited ? '收藏成功' : '取消收藏');
  } catch (error) {
    error('收藏操作失败，请检查网络连接后重试', '操作失败');
  }
};

/**
 * 加载竞赛详情
 */
const loadContestDetail = async () => {
  if (!props.contestId) return;
  
  try {
    await contestStore.fetchContestById(props.contestId);
    console.log('=== 竞赛详情加载成功 ===');
    console.log('竞赛数据:', contestStore.currentContest);
    console.log('竞赛状态:', contestStore.currentContest?.status);
    console.log('用户登录状态:', userStore.isAuthenticated);
    console.log('参与状态信息:');
    console.log('  是否已参与:', contestStore.currentContest?.isJoined);
    console.log('  是否可参与:', contestStore.currentContest?.canJoin);
    console.log('  是否可提交:', contestStore.currentContest?.canSubmit);
    console.log('  是否已提交作品:', contestStore.currentContest?.hasSubmittedWork);
    console.log('  参与状态:', contestStore.currentContest?.participationStatus);
    console.log('  已提交作品标题:', contestStore.currentContest?.submittedWorkTitle);
    console.log('按钮显示逻辑:');
     console.log('  参与竞赛按钮显示:', !contestStore.currentContest?.isJoined);
     console.log('  退赛按钮显示:', contestStore.currentContest?.isJoined);
     console.log('  提交作品按钮显示:', contestStore.currentContest?.isJoined);
     console.log('  提交作品按钮禁用:', !userStore.isAuthenticated || contestStore.currentContest?.hasSubmittedWork || contestStore.currentContest?.status === 'ended');
     console.log('  已提交作品提示显示:', contestStore.currentContest?.hasSubmittedWork);
    console.log('========================');
  } catch (error) {
    console.error('加载竞赛详情失败:', error);
  }
};

/**
 * 加载作品列表
 */
const loadWorks = async () => {
  if (!props.contestId) return;
  
  loading.value = true;
  try {
    const worksData = await contestStore.getContestWorks(props.contestId);
    works.value = worksData.works || worksData.data || [];
  } catch (error) {
    console.error('加载作品列表失败:', error);
    works.value = [];
  } finally {
    loading.value = false;
  }
};

/**
 * 加载所有数据
 */
const loadAllData = async () => {
  if (!props.contestId) return;
  
  await loadContestDetail();
  await loadWorks();
};

// 监听竞赛ID变化
watch(() => props.contestId, async (newId) => {
  if (newId && props.visible) {
    await loadAllData();
  }
});

// 监听弹窗显示状态
watch(() => props.visible, async (visible) => {
  if (visible && props.contestId) {
    await loadAllData();
  }
});

// 组件挂载时加载数据
onMounted(async () => {
  // 初始化用户认证状态
  await loadCategories();
  
  if (props.visible && props.contestId) {
    await loadAllData();
  }
  userStore.initializeAuth();
  
  if (props.visible && props.contestId) {
    loadAllData();
  }
});
</script>

<style scoped>
/* 已提交作品信息样式 */
.submitted-work-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #f0f9ff;
  border: 1px solid #0ea5e9;
  border-radius: 6px;
  font-size: 14px;
}

.submitted-badge {
  color: #0ea5e9;
  font-weight: 600;
}

.work-title {
  color: #64748b;
  font-style: italic;
}
.contest-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
  color: #333;
}

.modal-body * {
  color: inherit;
}

.contest-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  color: #333;
}

.label {
  font-weight: bold;
  margin-right: 8px;
  color: #666;
}

.info-item span:not(.label) {
  color: #333;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.status.active,
.status.ongoing {
  background: #e8f5e8;
  color: #2e7d32 !important;
}

.status.upcoming {
  background: #fff3e0;
  color: #f57c00 !important;
}

.status.ended {
  background: #ffebee;
  color: #c62828 !important;
}

.prize {
  color: #f57c00 !important;
  font-weight: bold;
}

.contest-description {
  margin-bottom: 20px;
}

.contest-description h3 {
  margin-bottom: 10px;
  color: #333;
}

.description-text {
  line-height: 1.6;
  color: #666;
  white-space: pre-line;
  max-height: 150px;
  overflow-y: auto;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
  border-left: 4px solid #1976d2;
}

.contest-rules {
  margin-bottom: 20px;
}

.contest-rules h3 {
  margin-bottom: 10px;
  color: #333;
}

.rules-content {
  background: #f9f9f9;
  border-radius: 4px;
  padding: 15px;
  border-left: 4px solid #388e3c;
}

.rule-item {
  margin: 8px 0;
  padding: 5px 0;
  color: #555;
  line-height: 1.5;
  border-bottom: 1px solid #eee;
}

.rule-item:last-child {
  border-bottom: none;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: #1976d2;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #1565c0;
}

.btn-secondary {
  background: #757575;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #616161;
}

.btn-success {
  background: #388e3c;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #2e7d32;
}

.works-section h3 {
  margin-bottom: 15px;
  color: #333;
}

.loading, .no-works {
  text-align: center;
  padding: 40px;
  color: #999;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.work-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.work-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.work-thumbnail {
  height: 150px;
  overflow: hidden;
}

.work-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-info {
  padding: 15px;
}

.work-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.work-author {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
}

.work-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.action-btn:hover {
  background: #f5f5f5;
}

.action-btn.active {
  background: #1976d2;
  color: white;
  border-color: #1976d2;
}

/* 提交作品弹窗样式 */
.submit-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  backdrop-filter: blur(4px);
}

.submit-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.submit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.submit-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.submit-header .close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.submit-header .close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.submit-form {
  padding: 2rem;
  max-height: calc(90vh - 120px);
  overflow-y: auto;
}

.form-row {
  margin-bottom: 1.5rem;
}

.form-group {
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group label.required::after {
  content: ' *';
  color: #e74c3c;
}

.optional {
  color: #999;
  font-weight: normal;
  font-size: 0.8rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.char-count {
  position: absolute;
  right: 0.5rem;
  bottom: -1.5rem;
  font-size: 0.75rem;
  color: #999;
}

/* 图片上传样式 */
.image-upload {
  border: 2px dashed #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.image-upload:hover {
  border-color: #667eea;
}

.upload-placeholder {
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.upload-placeholder:hover {
  background: #f8f9fa;
}

.upload-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.upload-placeholder p {
  margin: 0.5rem 0;
  color: #333;
  font-weight: 500;
}

.upload-placeholder small {
  color: #666;
  font-size: 0.8rem;
}

.image-preview {
  position: relative;
  display: inline-block;
}

.image-preview img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.remove-image,
.remove-file {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.remove-image:hover,
.remove-file:hover {
  background: rgba(0, 0, 0, 0.9);
}

/* 文件上传样式 */
.file-upload {
  border: 2px dashed #e9ecef;
  border-radius: 8px;
  transition: border-color 0.2s;
}

.file-upload:hover {
  border-color: #667eea;
}

.file-info {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  position: relative;
}

.file-icon {
  font-size: 1.5rem;
  margin-right: 0.75rem;
}

.file-details {
  flex: 1;
}

.file-name {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.25rem;
}

.file-size {
  font-size: 0.8rem;
  color: #666;
}

/* 表单操作按钮 */
.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0f0f0;
}

.cancel-btn,
.submit-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cancel-btn {
  background: #f8f9fa;
  color: #6c757d;
  border: 1px solid #dee2e6;
}

.cancel-btn:hover {
  background: #e9ecef;
  color: #495057;
}

.submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  min-width: 120px;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .submit-content {
    width: 95%;
    margin: 1rem;
  }
  
  .submit-header {
    padding: 1rem 1.5rem;
  }
  
  .submit-form {
    padding: 1.5rem;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .cancel-btn,
  .submit-btn {
    width: 100%;
    justify-content: center;
  }
}
</style>